<template lang="pug">
  .container.lession__main
    .row.content__head
      .col-sm-3
        h2.side__menu__textbook 课本
        .side__menu__control
          .side__menu__switch(@click.prevent="addNode")
            i.icon_switch_normal
            | 添加
          .side__menu__switch(@click.prevent="selectBook")
            i.icon_switch_normal
            | 切换
          .side__menu__switch(@click.prevent="modifyNode")
            i.icon_switch_normal
            | 修改
          .side__menu__switch(@click.prevent="")
            i.icon_switch_normal
            | 删除
      .col-sm-9
        h2.content__filter__title 内容
          small （共2345个资源）
        .content__filter
          button.btn.btn-outline-primary.btn-sm.add-note-btn(@click="addLession") 上传
          .content__filter__date.input-daterange
            input(type='text', name='start')
            | 到
            input(type='text', name='end')
          .content__filter__order 时间顺序
      .col-sm-12
        .split
    .row
      .col-sm-3
        h3.side__menu__dt 高二数学（第二学期）
        ul.side__menu__list.side__menu__list_teacher
          li(v-for="item in books", v-if="item.level === 1")
            router-link.side__menu__sub.expand(:to="'/teacher/lession/' + item.catalogId") {{item.catalogName}}
            ul(v-for="level2 in books", v-if="level2.level === 2")
              li
                router-link.side__menu__sub(:to="'/teacher/lession/' + level2.catalogId") {{level2.catalogName}}
                ul(v-for="level3 in books", v-if="level3.level === 3 && level3.parentId === level2.catalogId")
                  li
                    router-link(:to="'/teacher/lession/' + level3.catalogId") {{level3.catalogName}}
      .col-sm-9
        .lession__list__container
          .lession__list
            .lession__layout(v-for="(item, $index) in lessions.list", @click.stop="toDetail(item)")
              .lession__card
                .lession__video
                .lession__content
                  h5 {{item.id}}
                  div.lession__desc
                    span.name Mrs.Li
                    span.time.active  {{item.createdTime}}）
                  .info 
                    .infoLeft
                      span eye_pic
                      span {{item.praiseCount}}                    
                    .infoRight
                      .side__menu__switch.info_actions(@click.stop="modifyLession(item)")
                        i.icon_switch_normal.icon_switch_normal_mini
                        | 修改
                      .side__menu__switch.info_actions(@click.stop="deleteLession(item, $index)")
                        i.icon_switch_normal.icon_switch_normal_mini
                        | 删除
                      
        page
</template>
<style lang="scss">
.add-note-btn {
  margin-right: 10px;
}
.lession__list {
  margin-right: -20px;
  @include clearfix();
}
.side__menu__switch {
  cursor: pointer;
}
.lession__list__container {
  margin-top: 15px;
}
.lession__layout {
  float: left;
  width: 25%;
  padding-right: 20px;
  margin-bottom: 20px;
}
.lession__card {
  background: #f2f3f5;
}
.lession__content {
  padding: 0 14px;
  h5 {
    margin: 10px 0;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .info {
    height: 40px;
    font-size: 12px;
    color: #828080;
    .infoLeft {
      width: 30%;
      float: left;
      height: 40px;
      line-height: 40px;
    }
    .infoRight {
      float: right;
      .info_actions {
        color: $teacherMainColor;
        margin-top: 6px;
        .icon_switch_normal_mini {
          width: 14px;
          height: 14px;
          background-size: 14px 14px;
        }
      }
    }
  }
}
.lession__desc {
  margin: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  color: #828080;
  border-top: 1px solid #bab9ba;
  border-bottom: 1px solid #bab9ba;
  width: 100%;

  span {
    &.active {
      color: #828080;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 72%;
      float: right;
    }
  }
  .name {
    margin-right: 2px;
  }
}
.lession__video {
  height: 190px;
  cursor: pointer;
}
</style>

<script>
import 'js/bootstrap-datepicker'
import 'js/bootstrap-datepicker.zh-CN.min'
import student from 'api/lession'
import api from 'api/teacher/lession'
const lessionConfig = {
  teacherid: '120176175841542144',
  time: 20160101000000,
  bookid: '119907809079853056',
  catelogid: '',
  timeOrder: 1,
  from: 0,
  size: 10
}
export default {
  data () {
    return {
      books: [],
      lessions: []
    }
  },
  beforeRouteEnter (to, from, next) {
    api
      .getLessions(lessionConfig)
      .then(response => {
        next(vm => {
          vm.lessions = response.data.data
        })
      })
  },
  beforeRouteUpdate (to, from, next) {
    this.getLessions(lessionConfig).then(() => {
      next()
    })
  },
  computed: {
    currentBook () {
      return this.books.find(item => {
        return item.catalogId === (this.$route.params.catelogid || '1')
      })
    }
  },
  mounted () {
    this.getBooks()
    $('.content__filter__date').datepicker({
      language: 'zh-CN',
      autoclose: true
    })
  },
  methods: {
    getBooks () {
      student.getBooks('119907809079853056').then(response => {
        this.books = response.data.data
      })
    },
    addBook () {
      this.$store.commit('show', 'addBook')
    },
    selectBook () {
      this.$store.commit('show', 'switchLession')
    },
    getLessions (params) {
      return api.getLessions(params).then(response => {
        this.lessions = response.data.data
      })
    },
    toDetail (item) {
      this.$router.push(
        '/teacher/lession/' +
          (this.$route.params.catelogId || 1) +
          '/' +
          item.id
      )
    },
    deleteLession (item, index) {
      return api.deleteLession(item.id).then(() => {
        this.lessions.list.splice(index, 1)
      })
    },
    addLession () {
      this.$store.commit('show', 'teacherAddLession')
    },
    modifyLession (item) {
      this.$store.commit('changeLession', {
        type: 'modify',
        data: item
      })
      this.$store.commit('show', 'teacherAddLession')
    },
    addNode () {
      this.$store.commit('changeNode', {
        type: 'add',
        data: this.currentBook
      })
      this.$store.commit('show', 'addNode')
    },
    modifyNode () {
      this.$store.commit('changeNode', {
        type: 'modify',
        data: this.currentBook
      })
      this.$store.commit('show', 'addNode')
    }
  }
}
</script>